<template>
  <div class="page">
    <heads></heads>
    <div class="page-content" style="width: 100%;background: #fff">
          <div class="main-body" style="padding-bottom: 160px" :style="{'-webkit-overflow-scrolling': scrollMode}">
            <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore">
              <div class="description">只有竞猜赢得的竞猜豆才能兑换奖品，直接充值和赠送的竞猜豆不计算在可兑奖范围内(手机充值卡可充入支付宝)</div>
              <ul class="prizeList" >
                  <li v-for="item,key in pageList">
                    <div>
                      <div class="peize-img">
                        <img :src="item.picUrl">
                      </div>
                      <div class="peize-titel">{{item.name}}</div>
                      <div class="prize-btn" :class="item.state==11?'have-prize':'no-prize'" @click="prizeShop(item.id,item.name,item.type)">
                        <span class="prize-icon"></span>
                        <span v-if="item.state==11">{{item.coinPrice}}竞猜豆</span>
                        <span v-if="item.state==10">暂未上架</span>
                      </div>
                    </div>
                  </li>
                  <!--<li>-->
                    <!--<div>-->
                      <!--<div class="peize-img">-->
                        <!--<img src="https://gss0.bdstatic.com/5eR1dDebRNRTm2_p8IuM_a/res/r/image/2016-11-01/7c408df507ad07d1e3b9a14f3756e9ad.jpg">-->
                      <!--</div>-->
                      <!--<div class="peize-titel">联通30元手机充值卡</div>-->
                      <!--<div class="prize-btn no-prize">-->
                        <!--<span class="prize-icon"></span>-->
                        <!--<span>4.2万竞猜豆</span>-->
                      <!--</div>-->
                    <!--</div>-->
                  <!--</li>-->

              </ul>
            </mt-loadmore>
          </div>
    </div>
  </div>
</template>
<script>
  import heads from '../components/header'
  import { Loadmore,Toast ,MessageBox,MtButton } from 'mint-ui';
  export default {
    data(){
      return{
        selected: '1',
        searchCondition: {  //分页属性
          pageNo:1,
          pageSize: 5
        },
        pageList: [],
        allLoaded: false, //是否可以上拉属性，false可以上拉，true为禁止上拉，就是不让往上划加载数据了
        scrollMode: "auto", //移动端弹性滚动效果，touch为弹性滚动，auto是非弹性滚动
        islogin:sessionStorage.getItem('login'),

        nameRex:/^1[3|4|5|7|8]\d{9}$/,
      }
    },
    components: {
      heads,
      MtButton,
      'v-loadmore': Loadmore  // 为组件起别名，vue转换template标签时不会区分大小写，例如：loadMore这种标签转换完就会变成loadmore，容易出现一些匹配问题
      // 推荐应用组件时用a-b形式起名
    },
    mounted() {
      this.loadPageList();  //初次访问查询列表
      const _this=this
      if(this.islogin=='false'){
        MessageBox.confirm('',{
          title: '',
          message: '未登录',
        }).then(action => {
          this.$router.push({path:'/login'})
        },()=>{//取消
          this.$router.go(-1)
        });
      }
    },
    methods:{
      prizeShop:function (id,txt,type) {
        var _this=this;
        const tel='';
        if(type==20){
          MessageBox.prompt('',{
            title: '',
            message: '输入要充值的手机号',
          }).then(({ value, action }) => {
             if(value==''||value==null){
               Toast('请输入手机号码');
               return
             }else if(!(this.nameRex).test(value)){
               Toast('手机号码格式错误');
               return
             }
            this.$http(this.API.shopRecord,{data:{proId:id,quantity:1,accountNum:value}}).then(function(res) {
              Toast({
                message: res.message,
                iconClass: 'icon'+res.flag==1?'icon-success':'icon-error',
                duration: 3000
              });
              _this.loadPageList();  //初次访问查询列表
            }).catch(function(err) {
              console.log(err);
            });
          },()=>{

          });
        }else{
          MessageBox.confirm('',{
            title: '确认兑换',
            message: txt,
          }).then(action => {
            this.$http(this.API.shopRecord,{data:{proId:id,quantity:1}}).then(function(res) {
              Toast({
                message: res.message,
                iconClass: 'icon'+res.flag==1?'icon-success':'icon-error',
                duration: 3000
              });
              _this.loadPageList();  //初次访问查询列表
            }).catch(function(err) {
              console.log(err);
            });
          },()=>{//取消
            //alert(87)
          });
        }


      },
      loadTop: function() { //组件提供的下拉触发方法
        //下拉加载
        this.loadPageList();
        this.$refs.loadmore.onTopLoaded();// 固定方法，查询完要调用一次，用于重新定位
      },
      loadBottom: function() {
        // 上拉加载
        this.more();// 上拉触发的分页查询
        this.$refs.loadmore.onBottomLoaded();// 固定方法，查询完要调用一次，用于重新定位
      },
      loadPageList: function() {
        var _this=this;
        _this.searchCondition.pageNo=1;
        this.$http(this.API.shopList,{
          data:{page:_this.searchCondition.pageNo,length:_this.searchCondition.pageSize}
        }).then(function(res) {

          _this.pageList=res.list
          _this.isHaveMore(false);
          const eva=eval("("+res.userInfo+")")
          _this.$store.state.moneys=eva.coin;
          _this.$nextTick(function() {
            _this.scrollMode = "touch";
          });
        }).catch(function(err) {
          console.log(err);
        });
      },
      more: function() {
        // 分页查询
        var _this=this;
        _this.searchCondition.pageNo = parseInt(_this.searchCondition.pageNo) + 1;
        this.$http(this.API.shopList,{
          data:{page:_this.searchCondition.pageNo,length:_this.searchCondition.pageSize}
        }).then(function(res) {
          _this.pageList =_this.pageList.concat(res.list);
          Toast({
            message: res.list.length<1?'没有更多':'加载成功',
            position: 'bottom',
            duration: 2000
          });
          if(res.list.length<1){
            _this.isHaveMore(true);
          }
        }).catch(function(err) {
          console.log(err);
        });

      },
      isHaveMore: function(isHaveMore) {
        // 是否还有下一页，如果没有就禁止上拉刷新
        this.allLoaded = false; //true是禁止上拉加载
        if (isHaveMore) {
          this.allLoaded = true;
        }
      },
    },

  }
</script>
<style>
@import "../sass/pageScss/prize.scss";
  .mint-msgbox-input input{
    height:35px;
  }
</style>

